<template>
  <page-loading :show="pageLoading">
    <!-- 新建订单 - 列表页面 -->
    <view class="create-order-container">
      <!-- 车辆信息 -->
      <car-info-header></car-info-header>

      <!-- 填写信息部分 -->
      <view class="form-section">
        <!-- 实物产品 -->
        <view class="product-box">
          <!-- 标题项 -->
          <view class="title-box flex flex-ai-c">
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>实物产品</text>
            </view>
            <view class="right-item">价格</view>
            <view class="right-item">数量</view>
          </view>

          <!-- 产品项 -->
          <view class="list">
            <uni-swipe-action>
              <uni-swipe-action-item
                :right-options="rightOptions"
                v-for="(item, index) in productList"
                :key="index"
                @click="delChange(index)"
              >
                <view class="item flex flex-ai-c flex-jc-sb">
                  <view class="title m-line-text-2">{{ item.goods_Name }}</view>
                  <view class="right-item color-EB5C02"
                    >￥{{ item.isVisualGoods ? 0 : item.sale_Price }}</view
                  >
                  <view class="num-box flex flex-ai-c">
                    <view class="btn" @click="less(item)">
                      <u-icon name="minus" color="#999999" size="32"></u-icon>
                    </view>
                    <input type="number" v-model="item.amount" class="cont" />
                    <view class="btn" @click="add(item)">
                      <u-icon name="plus" color="#999999" size="32"></u-icon>
                    </view>
                  </view>
                  <!-- <view class="right-item">x{{ item.amount }}</view> -->
                </view>
              </uni-swipe-action-item>
            </uni-swipe-action>

            <!-- 添加产品按钮 -->
            <view
              class="item btn-add flex flex-ai-c flex-jc-fe"
              @click.stop="goodsShow = true"
            >
              <i-icon
                icon="icontianjia_1"
                size="34rpx"
                color="#FBB000"
              ></i-icon>
              <text class="font-28 color-FBB000 ml-10">添加商品</text>
            </view>
          </view>
        </view>

        <!-- 施工服务 -->
        <view class="serve-box">
          <!-- 标题项 -->
          <view class="title-box flex flex-ai-c">
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>施工服务</text>
            </view>
            <view class="right-item">价格</view>
            <view class="right-item">数量</view>
          </view>

          <!-- 服务项 -->
          <view class="list">
            <view
              v-for="(item, index) in serveList"
              :key="item.id"
              class="item flex flex-ai-c flex-jc-sb"
              @click="servePopupOpen(item)"
            >
              <view class="title m-line-text-2">{{ item.service_Name }}</view>
              <view class="right-item color-EB5C02"
                >￥{{ item.service_Price }}</view
              >
              <view class="right-item flex flex-jc-c flex-ai-c">
                <text>x{{ item.serviceNum }}</text>
                <u-icon
                  name="arrow-right"
                  size="24rpx"
                  color="#999"
                  class="icon-right"
                ></u-icon>
              </view>
            </view>

            <view v-if="serveList.length === 0" class="not-data">
              <text>暂无服务项目</text>
            </view>
          </view>
        </view>

        <!-- 关联检测异常 -->
        <view class="serve-box">
          <!-- 标题项 -->
          <view
            class="title-box flex flex-ai-c flex-jc-sb"
            @click="goErrorPage()"
          >
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>关联检测异常</text>
            </view>
            <view>
              <u-icon
                name="arrow-right"
                size="28rpx"
                color="#999"
                class="icon-right"
              ></u-icon>
            </view>
          </view>

          <!-- 异常项 -->
          <view class="err-list">
            <view
              v-for="(item, index) in errList"
              :key="item.exceptionId"
              class="item"
            >
              <view class="err-label">{{ item.exceptionName }}</view>
              <view class="err-name">{{ item.exceptionMsg }}</view>
              <view class="err-img" @click="previewImg(item.imgs)">
                <image :src="item.imgs[0]" mode="center"></image>
                <view class="img-bottom-text">{{ item.position }}</view>
              </view>
            </view>

            <view v-if="errList.length === 0" class="not-data">
              <text>暂无关联检测异常</text>
            </view>
          </view>
        </view>

        <!-- 安装类型 -->
        <view class="install-type-box">
          <!-- 标题项 -->
          <view class="title-box flex flex-ai-c flex-jc-sb">
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>安装类型</text>
            </view>
            <view
              class="right-box flex flex-ai-c flex-jc-fe"
              @click="installModeOpen()"
            >
              <view class="item">{{ installMode.name || '到店安装' }}</view>
              <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
            </view>
          </view>
        </view>

        <!-- 运费设置 -->
        <view class="freight-box">
          <!-- 标题项 -->
          <view class="title-box flex flex-ai-c flex-jc-sb">
            <view class="title flex flex-ai-c">
              <view class="line"></view>
              <text>运费设置</text>
            </view>
            <view class="right-box flex flex-ai-c flex-jc-fe">
              <input
                type="text"
                v-model="freightVal"
                placeholder="请输入运费"
                placeholder-style="color: #999;"
                class="input-box"
              />
              <text>元</text>
            </view>
          </view>
        </view>

        <!-- 商品金额部分 -->
        <view class="goods-price-box">
          <view class="item flex flex-ai-c flex-jc-sb">
            <text>商品金额</text>
            <text>￥{{ priceData.goodsPrice | handleNumFloat }}</text>
          </view>
          <view class="item flex flex-ai-c flex-jc-sb">
            <text>服务金额</text>
            <text>￥{{ priceData.servePrice | handleNumFloat }}</text>
          </view>
          <view class="item flex flex-ai-c flex-jc-fe">
            <text class="color-999">合计：</text>
            <text class="color-EB5C02"
              >￥{{ priceData.totalPrice | handleNumFloat }}</text
            >
          </view>
        </view>

        <!-- 备注 -->
        <view class="remark-box">
          <view class="item flex flex-jc-sb">
            <text>备注</text>
            <textarea
              type="text"
              v-model="remark"
              placeholder="请填写备注"
              maxlength="140"
              auto-height
              class="remark-input"
            />
          </view>
        </view>
      </view>

      <!-- 底部固定按钮 -->
      <view class="btn-box flex flex-ai-c">
        <view class="btn" @click="cancel()">
          <i-button
            text="取消"
            bg-color="#333"
            color="#FFE23E"
            shape="circleLeft"
          ></i-button>
        </view>
        <view class="btn" @click="save()">
          <i-button text="保存" color="#333" shape="circleRight"></i-button>
        </view>
      </view>

      <!-- 
    ---------- 弹框部分 ---------- 
     -->
      <!-- 添加商品 -->
      <u-popup
        mode="bottom"
        v-model="goodsShow"
        border-radius="30"
        z-index="666"
      >
        <add-goods-popup
          @change="addGoodsChange"
          :show.sync="goodsShow"
        ></add-goods-popup>
      </u-popup>

      <!-- 编辑服务 -->
      <u-popup
        mode="bottom"
        v-model="serveShow"
        border-radius="30"
        z-index="666"
      >
        <edit-serve-popup
          ref="serve"
          @change="editServeChange"
        ></edit-serve-popup>
      </u-popup>

      <!-- 安装方式 -->
      <u-popup
        mode="bottom"
        v-model="installModeShow"
        border-radius="30"
        z-index="666"
      >
        <install-mode-popup
          ref="installMode"
          @change="installModeChange"
        ></install-mode-popup>
      </u-popup>
    </view>
  </page-loading>
</template>

<script src="./createMaintenanceOrder.js"></script>

<style lang="scss" scoped>
.create-order-container {
  min-height: 100vh;
  padding-bottom: 140rpx;
  background-color: #f4f4f4;

  .form-section {
    padding: 0 24rpx;
  }
}

@mixin publicBox() {
  margin-top: 22rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  font-size: 28rpx;

  .title-box {
    height: 86rpx;
    line-height: 86rpx;

    .title {
      width: 50%;

      .line {
        width: 8rpx;
        height: 30rpx;
        background: #ffe23e;
        border-radius: 4rpx;
      }

      text {
        margin-left: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
      }
    }

    .right-item {
      width: 15%;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      text-align: center;

      &:last-child {
        width: 25%;
        margin-left: auto;
      }
    }
  }

  // 列表
  .list {
    .title {
      width: 38%;
    }

    .item {
      width: 100%;
      padding: 24rpx 0;
      border-top: 1px solid #eee;

      // 计数器
      .num-box {
        border: 1px solid #eee;
        border-radius: 10rpx;

        .btn {
          width: 48rpx;
          text-align: center;
          color: #999;
        }
        .cont {
          width: 48rpx;
          height: 48rpx;
          // background-color: #EEEEEE;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-radius: 10rpx;
          text-align: center;
        }
      }
    }

    .right-item {
      width: 15%;
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;

      &:last-child {
        width: 25%;
      }
    }
  }
}

// 实物产品
.product-box {
  @include publicBox();
}

// 施工服务
.serve-box {
  @include publicBox();

  // 处理右边箭头布局对齐
  .list {
    .right-item {
      text,
      .icon-right {
        margin-left: auto;
      }
    }

    // 无服务项目
    .not-data {
      padding: 35rpx 0;
      border-top: 1px solid #eee;
      font-size: 28rpx;
      color: #999999;
      text-align: center;
    }
  }
}

// 检测异常列表
.err-list {
  .item {
    display: inline-block;
    width: 50%;
    padding: 32rpx 0;
    border-top: 1px solid #eee;
  }

  .err-label {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
  }

  .err-name {
    display: inline-block;
    padding: 18rpx 25rpx;
    margin: 18rpx 0;
    background-color: #fff7f7;
    font-size: 24rpx;
    color: #eb5c02;
    border-radius: 10rpx;
  }

  .err-img {
    width: 266rpx;
    height: 200rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .img-bottom-text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;
      padding-left: 22rpx;
      background: rgba(0, 0, 0, 0.4);
      font-size: 22rpx;
      color: #fff;
    }
  }

  // 无服务项目
  .not-data {
    padding: 35rpx 0;
    border-top: 1px solid #eee;
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}

// 安装类型
.install-type-box {
  @include publicBox();

  .title-box {
    .right-box {
      .item {
        margin-right: 20rpx;
        color: #333;
      }
    }
  }
}

// 运费设置
.freight-box {
  @include publicBox();

  .title-box {
    .right-box {
      .item {
        margin-right: 20rpx;
        color: #333;
      }
    }
  }

  .input-box {
    padding-right: 30rpx;
    font-size: 28rpx;
    color: #333;
    text-align: right;
  }
}

// 商品金额部分
.goods-price-box {
  @include publicBox();

  .item {
    padding: 30rpx 0;

    & + .item {
      border-top: 1px solid #eee;
    }
  }
}

// 备注
.remark-box {
  @include publicBox();

  .item {
    padding: 30rpx 0;
  }

  .remark-input {
    // padding-left: 100rpx;
    font-size: 28rpx;
    text-align: right;
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 120rpx;
  padding: 0 24rpx;
  background-color: #fff;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}
</style>
